<template>
    <div class="permanent-exhibition">
      <div class="content">
        <!-- 展览内容区域 -->
        <el-card class="exhibition-card">
          <template #header>
            <div class="card-header">
              <h2>青铜器文明展</h2>
              <el-tag type="success" size="small">常设展览</el-tag>
            </div>
          </template>
          <div class="card-content">
            <img 
              src="@/assets/carousel1.jpg"
              class="feature-image"
              alt="青铜器文明展"
            >
            <div class="text-content">
              <p>展示从夏商周到汉唐的青铜器发展历程，包含：</p>
              <ul>
                <li>司母戊鼎等国宝级文物</li>
                <li>青铜器铸造工艺演示</li>
                <li>多媒体互动体验区</li>
              </ul>
              <el-button 
                type="primary" 
                icon="el-icon-video-play"
                @click="openVirtualTour"
              >
                开启虚拟导览
              </el-button>
            </div>
          </div>
        </el-card>
        <!-- 可以添加更多展览卡片 -->
      </div>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      openVirtualTour() {
        this.$router.push('/virtual-tour/bronze');
      },
      scrollToTop() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .permanent-exhibition {
    position: relative;
    min-height: 100vh;
  }
  
  .content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
  }
  
  .exhibition-card {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EBEEF5;
  }
  
  .card-header h2 {
    font-size: 18pt;
  }
  
  .card-content {
    display: flex;
    gap: 20px;
    margin-top: 15px;
  }
  
  .feature-image {
    width: 250px;
    height: 187.5px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }
  
  .text-content {
    flex: 1;
  }
  
  .text-content p {
    font-size: 12pt;
    margin-bottom: 10px;
  }
  
  .text-content ul {
    margin-bottom: 15px;
    padding-left: 20px;
  }
  
  .text-content li {
    font-size: 12pt;
    line-height: 1.6;
  }
  
  .el-button {
    font-size: 12pt;
  }
  
  @media (max-width: 768px) {
    .card-content {
      flex-direction: column;
    }
    
    .feature-image {
      width: 100%;
      height: 180px;
    }
    
    .text-content p,
    .text-content li {
      font-size: 11pt;
    }
  }
  </style>